<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>823680621@qq.com</title>
	<style>
	*{margin: 0;padding: 0;}
	html,body{width: 100%;height: 100%;display: flex;}
	body{perspective: 800px;}
	.box{width: 400px;
		height:400px;
		border-radius: 50%;
		padding: 1px;
		margin:auto;
		transform: rotateX(60deg);
		transform-style: preserve-3d;}
	.box div{border:15px solid #ccd7d9;
			border-color:#ccd7d9 #d2dbde #d7e0e2 #d2dbde;
			border-radius: 50%;
			box-shadow: 0 1px 0 #fff,0 10px 0 #abbdc1 inset,0 10px 0 #abbcd1;
			position: absolute;}
	.box div:nth-child(1){
		left:calc(400px/2 - 340px/2 - 15px);
		top:calc(400px/2 - 340px/2 - 15px);
		width: 340px;
		height: 340px;
		animation:run 3s infinite linear alternate;
	}
	.box div:nth-child(2){
		left:calc(400px/2 - 280px/2 - 15px);
		top:calc(400px/2 - 280px/2 - 15px);
		width: 280px;
		height: 280px;
		animation:run 3s 0.5s infinite linear alternate;
	}
	.box div:nth-child(3){
		left:calc(400px/2 - 220px/2 - 15px);
		top:calc(400px/2 - 220px/2 - 15px);
		width: 220px;
		height: 220px;
		animation:run 3s 1s infinite linear alternate;
	}
	.box div:nth-child(4){
		left:calc(400px/2 - 160px/2 - 15px);
		top:calc(400px/2 - 160px/2 - 15px);
		width: 160px;
		height: 160px;
		animation:run 3s 1.5s infinite linear alternate;
	}
	.box div:nth-child(5){
		left:calc(400px/2 - 100px/2 - 15px);
		top:calc(400px/2 - 100px/2 - 15px);
		width: 100px;
		height: 100px;
		animation:run 3s 2s infinite linear alternate;
	}
	.box div:nth-child(6){
		left:calc(400px/2 - 20px/2 - 15px);
		top:calc(400px/2 - 20px/2 - 15px);
		width: 20px;
		height: 20px;
		animation:run 3s 2.5s infinite linear alternate;
	}

	@keyframes run{
		from{transform: translateZ(0px);}
		to{transform: translateZ(150px);}
	}
	p{
	font-size:50px;
	position:absolute;
	}
	</style>
</head>
<p>页面重做中...</p>
<body>
	<div class="box">
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		
	</div>
	
</body>
</html>